<template>
	<div id="my">
		<van-row class="mytwo">
			<van-col :span="1" :offset="17"><van-icon name="service-o" /></van-col>
			<van-col :span="2"><van-icon name="setting-o" @click="exit"/></van-col>
			<van-col :span="3" style="font-size: 13px;" v-show="isexit" @click="yesexit">退出登录</van-col>
		</van-row>
		<van-row class="myziliao">
			<van-col :span="5">
				<img src="../../../public/images/1_13.jpg" class="myheadimg">
			</van-col>
			<van-col :span="15" class="mynames">
				<van-row class="myname">
					<!-- 15034575480 -->
					{{this.user.nickName}}
				</van-row>
				<van-row class="mycontent">
					云鹤九霄 龙腾四海
				</van-row>
			</van-col>
			<van-col :span="1" :offset="2" class="myicon"><van-icon name="arrow" /></van-col>
		</van-row>
		<van-row class="mynum">
			<van-col :span="8">
				<van-row class="mylikenum">68</van-row>
				<van-row class="mylike">关注</van-row>
			</van-col>
			<van-col :span="8">
				<van-row class="mylikenum">0</van-row>
				<van-row class="mylike">粉丝</van-row>
			</van-col>
			<van-col :span="8" @click="jumplike">		
				<van-row class="mylikenum">85</van-row>
				<van-row class="mylike">收藏</van-row>
			</van-col>
		</van-row>
	</div>
</template>

<script>
	export default
	{
		data()
		{
			return{
				user:{},
				isexit:false
			}
		},
		created()
		{
			this.user=JSON.parse(localStorage.getItem('username'))
		},
		methods:
		{
			exit()
			{
				if(this.isexit==true)
				{
					this.isexit=false
				}
				else
				{
					this.isexit=true
				}
			},
			yesexit()
			{
				console.log('退出登录')
				localStorage.removeItem('username')
			},
			// 跳转收藏
			jumplike()
			{
				this.$router.push('/like')
			}
		}
	}
</script>

<style>
	#my{
		width: 100%;
		height: 100%;
		background-color: #63c5de;
	}
	.mytwo{
		width: 100%;
		height: 50px;
		line-height: 50px;
		color: white;
		font-size: 1.5625rem;
	}
	.myziliao{
		width: 100%;
		height: 100px;
	}
	.myheadimg{
		width: 90px;
		height: 90px;
		border-radius: 50%;
		margin-top: 5px;
	}
	.mynames{
		width: 100%;
		height: 100%;
	}
	.myname{
		width: 100%;
		height: 50px;
		font-size: 30px;
		text-align: left;
		color: white;
		line-height: 60px;
	}
	.mycontent{
		width: 100%;
		height: 50px;
		font-size: 20px;
		text-align: left;
		color: white;
		line-height: 40px;
	}
	.myicon{
		width: 100%;
		height: 100%;
		line-height: 100px;
		font-size: 1.875rem;
		color: white;
	}
	.mynum{
		width: 100%;
		height: 100px;
		margin-top: 10px;
		font-size: 1.25rem;
		color: white;
	}
	.mylikenum{
		width: 100%;
		height: 50px;
		font-size: 30px;
		line-height: 60px;
	}
	.mylike{
		width: 100%;
		height: 50px;
		line-height: 40px;
	}
</style>